<template>
  <div>
    <!-- header -->
    <div class="dsv">
      <van-button plain color="#ffd01e" />普通区
      <van-button plain color="#08e8f5" />优先区
      <van-button plain color="#f73406" />特选区
    </div>
    <!-- body -->
    <div class="tbody">
      <!-- 做滑动效果 -->
      <div class="fover">
        <!-- 银幕 -->
        <div class="screen">
          <div class="screen_after"></div>
        </div>
        <!-- 前排 -->
        <div class="front_row">
          <van-row class="row_col" v-for="item in 2" :key="item">
            <van-col
              v-for="item in 10"
              :key="item"
              style="
                border: 1px solid rgb(181 180 180);
                background-color: #e6e5e5;
              "
            ></van-col>
          </van-row>
        </div>
        <!--中排  -->
        <div class="middle_row">
          <van-row v-for="(items, i) in seatlist" :key="i" @click="isShow">
            <van-col
              v-for="(item, t) in items"
              :key="t"
              :data-seat="item"
              style="
                border: 1px solid rgb(181 180 180);
                background-color: #e6e5e5;
              "
            ></van-col>
          </van-row>
        </div>
        <!-- 后排 -->
        <div class="back_row">
          <van-row v-for="item in 2" :key="item">
            <van-col
              v-for="item in 10"
              :key="item"
              style="
                border: 1px solid rgb(181 180 180);
                background-color: #e6e5e5;
              "
            ></van-col>
          </van-row>
        </div>
        <!-- 标签 -->
        <div class="label">
          <p>猫眼电影提供</p>
        </div>
      </div>
    </div>
    <!-- footer -->
    <div class="footer">
      <!-- 座位是否可选 -->
      <div class="ter_ast" v-show="open">
        <van-button type="default" />可选 <van-button type="danger" />已售
        <van-button color="rgb(230, 229, 229)" />不可售
      </div>
      <!-- 信息卡 -->
      <div class="ter_asc">
        <!-- 通知栏 -->
        <div class="asc_t">
          <van-notice-bar left-icon="volume-o" :scrollable="false">
            <van-swipe
              vertical
              class="notice-swipe"
              :autoplay="3000"
              :show-indicators="false"
              style="height: 40px; line-height: 40px"
            >
              <van-swipe-item
                v-for="item in 5"
                :key="item"
                v-model="noterout"
                >{{ noterout }}</van-swipe-item
              >
            </van-swipe>
          </van-notice-bar>
        </div>
        <!-- 影片信息 -->
        <div class="asc_con">
          <van-collapse v-model="activeNames">
            <van-collapse-item
              title="失控玩家"
              value="收起场次"
              label="今天 9月11日 12：05-13：59 英语3D"
              name="content"
            >
              <div class="over">
                <van-button plain type="primary" v-for="item in 5" :key="item" >
                  <p style="margin: 6px; font-size: 14px; color: black">
                    18:35
                  </p>
                  <p style="margin: 6px; font-size: 16px; color: #969799">
                    英语3D
                  </p>
                  <p style="margin: 6px; font-size: 14px; color: black">￥28</p>
                </van-button>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>
        <!-- 选座详情 -->
        <div class="asc_fitem">
          <div class="asc_ter" v-for="(item, i) of datalist" :key="i" >
            <van-button class="ter_bttn" :data-id="item" @click="quxiao">
              <span>{{ `${item.split('-')[0]}排${item.split('-')[1]}座` }}</span
              ><br />
              <span>￥36</span>
            </van-button>
          </div>
        </div>
      </div>
      <!-- 确定按钮 -->
      <div class="ter_asb">
        <button class="seat_selection">请先选座</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ["content"],
      noterout: "我自横刀向天笑，去留肝胆两昆仑",
      open: true,
      bitm: true,
      datalist: [],
      seatlist: [
        ["3-1", "3-2", "3-3", "3-4", "3-5", "3-6", "3-7", "3-8", "3-9"],
        ["4-1", "4-2", "4-3", "4-4", "4-5", "4-6", "4-7", "4-8", "4-9"],
        ["5-1", "5-2", "4-3", "4-4", "4-5", "4-6", "4-7", "4-8", "4-9"],
        ["6-1", "6-2", "4-3", "4-4", "4-5", "4-6", "4-7", "4-8", "4-9"],
        ["7-1", "7-2", "4-3", "4-4", "4-5", "4-6", "4-7", "4-8", "4-9"],
        ["8-1", "8-2", "4-3", "4-4", "4-5", "4-6", "4-7", "4-8", "4-9"],
      ],
    };
  },
  methods: {
    isShow($event) {
      this.open = !true;
      let ter = $event.target.dataset.seat;
      // 如果数组中没有该位置并且数组长度小于6则添加一个新位置
      if(this.datalist.length<6){
        if(this.datalist.indexOf(ter) == -1){
          this.datalist.push(ter);
          //修改点击元素的选中样式

        }else{
          this.datalist.splice(this.datalist.indexOf(ter), 1);
          //修改点击样式的取消样式

        }
      }
    },
    quxiao($event){
       let id = $event.target.dataset.id;
       this.datalist.splice(this.datalist.indexOf(id), 1);
       //修改点击样式的取消样式
    }
  },
};
</script>

<style scoped>
.van-button {
  padding: 0;
  margin: 10px;
  width: 15px;
  height: 15px;
}
.dsv {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
}
/* tbody */
.tbody {
  margin-top: 35px;
  background-color: rgb(236 234 234);
}
.screen {
  margin: 0 40px 50px 40px;
  width: 300px;
  height: 17px;
}
.screen_after {
  width: 100%;
  height: 35px;
  border-radius: 50% 50% 0 0;
  border-top: 8px solid #c1c0c0f2;
}
.row_col {
  margin: 0 17px;
}
.van-col {
  text-align: center;
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  margin: 2px;
}
.middle_row {
  padding: 50px 34px;
}
.fover {
  height: 415px;
  overflow-y: auto;
}
.back_row {
  margin: 17px;
}
.label {
  margin: 120px 0;
  text-align: center;
  font-size: 53px;
  font-family: "华文彩云";
}

/* footer */
.van-button--plain.van-button--primary {
  width: 100px;
  height: 90px;
  margin: 2px;
  top: -2px;
  border: 2px solid red;
  border-radius: 5px;
  background-color: #f9d7d6;
}
.seat_selection {
  width: 90%;
  height: 50px;
  background-color: #ff8917;
  border: 0px;
  border-radius: 25px;
  margin: 5px 5%;
  color: white;
  font-size: 22px;
}
.over {
  white-space: nowrap;
  overflow-x: auto;
  margin: -10px;
}

.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
}
.ter_ast {
  background-color: #fbf6f6;
  display: flex;
  justify-content: center;
  align-items: center;
}

.asc_fitem {
  white-space: nowrap;
  overflow-x: auto;
}
.asc_ter {
  display: inline-block;
}
.ter_bttn {
  box-shadow: 0.5px 0.5px 0.5px rgb(223, 223, 223);
  border: 1px solid rgb(223, 223, 223);
  width: 80px;
  height: 80px;
  margin: 20px 6px;
}
</style>